<template>
  <div class="demo-page">
    <div class="other">{{ name }}</div>
    <input type="text" v-model="text" />
    <router-link to="/demo">跳转后返回，测试滚动位置记录</router-link>
    <div ref="scrollContentRef" class="qmp-scroll-y-content">
      <div>
        <div v-for="i in 100" :key="i">{{ i }}</div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue'
  export default defineComponent({
    name: 'Other'
  })
</script>
<script lang="ts" setup>
  import useScrollRecord from '@/hooks/use-scroll-record'
  import { ref } from 'vue'
  const text = ref('')
  const name = '黑色状态栏、带返回按钮'
  const scrollContentRef = ref()

  // keepalive 页面记录自定义滚动区域位置
  useScrollRecord(scrollContentRef)
</script>
<style lang="less" scoped>
  .demo-page {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
</style>
